@import './common';

section {
  >.wrapper {
    >.container {
      position: relative;
      margin: 0 auto;
      padding: 20px 343px 120px 20px;
      max-width: 1320px;

      >.article-breadcrumb {
        max-width: 100%;

        >ul {
          display: flex;
          display: -webkit-flex;

          >li {
            padding: 0 6px;
            color: #999;
            font-size: 12px;

            >a {
              color: #999;
            }
          }
        }
      }

      >.article-login {
        display: flex;
        display: -webkit-flex;
        padding: 37px 30px;

        >.login-left {
          margin-right: 78px;

          >h2 {
            font-size: 30px;
            margin-bottom: 29px;
          }

          >.left-item-one {
            margin-bottom: 30px;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            font-size: 14px;
            text-decoration: underline;

            >p:first-child {
              font-weight: 600;
            }
          }

          .left-item-two {
            .login-main-one {
              display: flex;
              margin-bottom: 30px;
              padding: 0 10px;
              height: 50px;
              line-height: 50px;
              border: 1px solid #bababa;
              font-size: 13px;

              >label {
                margin-right: 10px;
                flex-shrink: 0;
                color: #999;
              }

              >input {
                border: none;
                outline: none;
                flex-grow: 1;
                min-width: 30px;
                line-height: 30px;
              }
            }
          }

          .left-item-three {
            display: flex;
            display: -webkit-flex;

            .login-main-one {
              margin-right: 14px;
            }

            .login-main-code {
              height: 50px;
              width: 120px;

              img {
                height: 100%;
              }
            }
          }

          .left-item-four {
            display: flex;
            display: -webkit-flex;

            .login-main-one {
              margin-right: 14px;
            }

            .login-main-btn {
              margin-top: 3px;
              margin-bottom: 32px;

              >a {
                display: block;
                padding: 0 20px;
                min-width: 120px;
                height: 45px;
                line-height: 43px;
                text-align: center;
                font-size: 14px;
                background-color: #000;
                color: #fff;
              }
            }
          }

          .shopping-cart {
            max-width: 410px;
            font-size: 13px;

            >p {
              margin: 0 0 10px;

              >a {
                display: inline-block;
                vertical-align: middle;
                height: 17px;
                width: 17px;
                border: 1px solid #000;
              }

              >span {
                text-decoration: underline;
              }
            }
          }

          .left-btn-box {
            margin-bottom: 24px;

            >a {
              padding: 0 20px;
              display: block;
              min-width: 180px;
              height: 45px;
              line-height: 43px;
              text-align: center;
              background-color: #000;
              font-size: 14px;
              color: #fff;
            }
          }

          .sign-in-with {
            display: flex;
            display: -webkit-flex;
            font-size: 15px;

            >p {
              display: inline;
              vertical-align: middle;
            }

            >ul {
              display: flex;
              display: -webkit-flex;

              >li {
                >a {
                  margin-right: 10px;

                  >.iconfont {
                    font-size: 20px;
                  }

                  >.icon-weixin {
                    color: green;
                  }

                  >.icon-alipay-square-fill {
                    color: blue;
                  }

                  >.icon-QQ {
                    color: rgba(0, 0, 0, 0.623);
                  }

                  >.icon-weibo {
                    color: red;
                  }
                }
              }
            }
          }
        }

        >.login-right {

          >h3 {
            margin-bottom: 27px;
            padding-top: 5px;
            line-height: 1.2;
            font-size: 24px;
            font-weight: 700;
          }

          .right-item-one {
            margin-bottom: 24px;

            .title {
              margin-bottom: 11px;
              font-size: 18px;
              font-weight: 700;
              color: #000;
            }

            >p {
              font-size: 14px;
              color: #999;
              line-height: 18px;

              >a {
                font-size: 14px;
                color: #999;
                line-height: 18px;
                text-decoration: underline;
              }
            }
          }

          .right-btn-box{
            margin-bottom: 24px;

            >a {
              padding: 0 20px;
              display: block;
              min-width: 180px;
              height: 45px;
              line-height: 43px;
              text-align: center;
              background-color: #000;
              font-size: 14px;
              color: #fff;
            }
          }
        }
      }

      >.article-right {
        padding: 25px 10px;
        position: absolute;
        top: 60px;
        right: 20px;
        width: 306px;
        background-color: #f2f2f2;
        text-align: center;
        font-size: 14px;

        >p {
          margin: 0 0 20px;

          >i {
            font-size: 15px;
          }

          >span {
            font-weight: 700;
          }
        }

        >p:first-child {
          margin-bottom: 20px;
          font-size: 24px;
        }

        .btn-box {
          >a {
            margin: 0 auto;
            padding: 0 20px;
            display: block;
            width: 180px;
            height: 45px;
            line-height: 45px;
            background-color: #000;
            color: #fff;
          }
        }
      }
    }
  }
}